import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls

Item {
    property alias title: titleBar.text
    property alias enableInfo: infoBtn.visible
    property string sn: ''
    id: root
    Column {
        anchors.fill: parent

        Item {
            width: parent.width
            height: 35
            Text {
                id: titleBar
                leftPadding: 20
                width: parent.width - 20
                height: parent.height
                font.pixelSize: 18
            }

            MainPanelButton {
                id: infoBtn
                tiptext: '聊天信息'
                anchors.right: parent.right
                anchors.rightMargin: 10
                anchors.top: parent.top
                icon.source: 'qrc:/img/icon/省略号.png'
                onClicked: {
                    console.log("聊天信息 clicked")
                }
            }
        }

        Rectangle {
            width: parent.width
            height: 1
            color: '#d5d5d5'
        }

        SplitView {
            width: parent.width
            height: parent.height - 36
            orientation: Qt.Vertical
            handle: Rectangle {
                implicitWidth: 1
                implicitHeight: 2
                color: '#d5d5d5'
            }

            Rectangle {
                //聊天记录
                id: view1
                SplitView.minimumHeight: parent.height / 2 //在SplitView中最小宽度
                SplitView.preferredHeight: parent.height / 3 * 2 //item 默认显示宽度，范围在minimun和maximum之间，默认未设置，会使用item的implicitWidth(隐式宽度)
                SplitView.maximumHeight: parent.height / 4 * 3 //在SplitView中最大宽度
                color: '#ededed'

                ListView {
                    id: listView1
                    anchors.fill: parent
                    boundsBehavior: Flickable.StopAtBounds
                    highlightRangeMode: ListView.NoHighlightRange // 不显示高亮范围
                    highlightMoveDuration: 0
                    ScrollBar.vertical: ScrollBar {
                        policy: contentHeight >= height ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
                    }

                    Component {
                        id: chatDelegate
                        Item {
                            required property int index
                            width: view1.width
                            height: 75
                            required property string avatarIcon
                            required property string nickName
                            required property string messageText
                            required property bool self
                            required property bool group
                            ChatMessageItem {
                                anchors.fill: parent
                                isPeer: !self
                                peerAvatar: !self ? avatarIcon : undefined
                                selfAvatar: self ? avatarIcon : undefined
                                isGroup: group
                                message: messageText
                                peerName: nickName
                            }
                        }
                    }
                    model: ChatMessageModel {
                        id: chatModel
                    }
                    delegate: chatDelegate
                    focus: true
                    Timer {
                        id: t
                        interval: 10
                        running: false
                        repeat: fasle
                        onTriggered: {
                            listView1.positionViewAtEnd()
                        }
                    }
                    onCountChanged: {
                        t.start()
                    }
                    clip: true
                }
            }

            Item {
                height: parent.height - view1.height
                Column {
                    anchors.fill: parent
                    Item {
                        id: toolBar
                        width: parent.width
                        height: 35
                        Row {
                            leftPadding: 15
                            MainPanelButton {
                                id: btn1
                                tiptext: '发送表情(ALT+E)'
                                icon.source: 'qrc:/img/icon/表情包.png'
                                property var emojiObj
                                onClicked: {
                                    console.log("表情包 clicked")
                                    if (emojiObj) {
                                        emojiObj.destroy()
                                        emojiObj = null
                                    }
                                    var com = Qt.createComponent(
                                                'EmojiFrame.qml')
                                    if (com.status === Component.Ready) {
                                        emojiObj = com.createObject(btn1)
                                        emojiObj.x = x - emojiObj.width / 2
                                        emojiObj.y = y - emojiObj.height - 13
                                        emojiObj.open()
                                        emojiObj.selectItem.connect(
                                                    function (s) {
                                                        textEdit.insert(textEdit.cursorPosition,s)
                                                    })
                                    }
                                }
                            }
                            MainPanelButton {
                                tiptext: '发送收藏'
                                icon.source: 'qrc:/img/icon/收藏.png'
                                onClicked: {
                                    console.log("收藏 clicked")
                                }
                            }
                            MainPanelButton {
                                tiptext: '发送文件'
                                icon.source: 'qrc:/img/icon/文件夹.png'
                                onClicked: {
                                    console.log("文件夹 clicked")
                                }
                            }
                            MainPanelButton {
                                tiptext: '截图(ALT+E)'
                                icon.source: 'qrc:/img/icon/截图.png'
                                onClicked: {
                                    console.log("截图 clicked")
                                }
                            }
                            MainPanelButton {
                                tiptext: '聊天记录'
                                icon.source: 'qrc:/img/icon/chat.png'
                                onClicked: {
                                    console.log("聊天记录 clicked")
                                }
                            }
                        }
                    }

                    Item {
                        id: inputC
                        width: parent.width
                        height: parent.height - toolBar.height - sender.height

                        ScrollView {
                            width: parent.width
                            height: parent.height
                            TextArea {
                                width: parent.width
                                height: parent.height
                                id: textEdit
                                padding: 15
                                font.pointSize: 12
                                wrapMode: TextEdit.Wrap
                                clip: true
                                selectionColor: '#aeedca'
                                cursorDelegate: Rectangle {
                                    width: 2
                                    height: 2
                                    color: '#43cf86'
                                }
                                Keys.onPressed: event => {
                                                    if (event.key === Qt.Key_Return
                                                        || event.key === Qt.Key_Enter) {
                                                        sendText(text)
                                                        textEdit.clear()
                                                        event.accepted = true
                                                    }
                                                }
                            }
                        }
                    }

                    Item {
                        id: sender
                        width: parent.width
                        height: 50
                        Button {
                            id: control
                            text: '发送(S)'
                            width: 90
                            height: 30
                            anchors.right: parent.right
                            anchors.rightMargin: 20
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 15
                            enabled: !(textEdit.text === '')
                            contentItem: Text {
                                text: control.text
                                font: control.font
                                color: {
                                    control.enabled ? 'white' : '#9d9d9d'
                                }
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                            }
                            background: Rectangle {
                                id: brect
                                color: {
                                    control.enabled ? '#43cf86' : '#e1e1e1'
                                }
                                radius: 2
                                states: [
                                    State {
                                        name: "hovered"
                                        when: mouseArea.containsMouse
                                              && control.enabled
                                        PropertyChanges {
                                            target: brect
                                            color: '#06b75b'
                                        }
                                    },
                                    State {
                                        name: "disabled"
                                        when: !control.enabled
                                        PropertyChanges {
                                            target: brect
                                            color: '#e1e1e1'
                                        }
                                    }
                                ]

                                MouseArea {
                                    id: mouseArea
                                    anchors.fill: parent
                                    hoverEnabled: true
                                }
                            }
                            onClicked: {
                                console.log('发送 :' + textEdit.text)
                                var data = {
                                    "avatarIcon": 'qrc:/img/icon/me.jpg',
                                    "messageText": textEdit.text,
                                    "self": true,
                                    "group": true
                                }
                                sendText(textEdit.text)
                                textEdit.clear()
                            }
                        }
                    }
                }
            }
        }
    }

    function sendText(msg) {
        if (msg === '')
            return
        var data = {
            "avatarIcon": 'qrc:/img/icon/me.jpg',
            "messageText": msg,
            "self": true,
            "group": true
        }
        chatModel.append(data)
    }
}
